<template>
  <wd-popup
    v-model="isShowPopper"
    custom-style="background: transparent"
    @after-enter="showHandle"
    @leave="closeHandle"
  >
    <view
      class="popper-container"
      :class="{ show: isShowContent }"
      @click="isShowPopper = false"
    >
      <template v-if="popupType === '补贴弹窗'">
        <template v-if="subsidyImage">
          <v-image width="80vw" mode="widthFix" :src="subsidyImage" />
        </template>
        <template v-else>
          <v-image
            width="100vw"
            mode="widthFix"
            oss-src="landing-page-default-popper.png"
          />
          <view class="price-text">
            {{ `${discount.amount}元` }}
          </view>
        </template>
      </template>
      <template v-else-if="popupType === '挽留弹窗'">
        <view class="retrieve">
          <v-image
            width="100%"
            mode="widthFix"
            oss-src="landing-page-popup-background.png"
          />
          <view class="container">
            <view class="content">
              <view class="title">
                确定离开吗
              </view>
              <view class="text">
                <text>您有一张</text>
                <text class="highlight">
                  {{ `${discount.amount}元` }}
                </text>
                <text>的优惠券还未使用，本单可</text>
                <text class="highlight">
                  {{ `立减${discount.amount}元` }}
                </text>
                <text>，点击“确定”立即使用</text>
              </view>
            </view>
            <view class="button-list">
              <view class="cancel-button" @click="retrieveCancel">
                取消
              </view>
              <view class="submit-button" @click="retrieveSubmit">
                确定
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-else-if="popupType === '二次挽留弹窗'">
        <view class="secondary-retrieve">
          <view class="top-image" :class="{ show: isShowImage }">
            <view class="content">
              <v-image
                width="100%"
                mode="widthFix"
                oss-src="landing-page-reflux-popup-top.png"
              />
            </view>
          </view>
          <view class="center-image" :class="{ show: isShowImage }">
            <view class="content">
              <v-image
                width="100%"
                mode="widthFix"
                oss-src="landing-page-reflux-popup-background.png"
              />
              <view class="container">
                <view class="sub">
                  恭喜您，获得今日最佳优惠
                </view>
                <view class="main">
                  <text>现在下单，立享</text>
                  <text class="hightlight">
                    {{ `${discount.amount}` }}
                  </text>
                  <text>优惠</text>
                </view>
              </view>
            </view>
          </view>
          <view class="bottom-image" :class="{ show: isShowImage }">
            <view class="content">
              <v-image
                width="100%"
                mode="widthFix"
                oss-src="landing-page-reflux-popup-bottom.png"
              />
            </view>
          </view>
        </view>
      </template>
      <template v-else-if="popupType === '手气红包'">
        <view class="lucky-envelope">
          <view class="envelope-light">
            <v-image
              width="750rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-light.png"
            />
          </view>
          <view class="envelope-background">
            <v-image
              width="750rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-background-1.png"
            />
          </view>
          <view class="envelope-price-text">
            <text class="price">
              {{ discount.amount }}
            </text>
            <text>元</text>
          </view>
          <view class="envelope-button">
            <v-image
              width="408rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-button-1.png"
            />
          </view>
        </view>
      </template>
      <template v-else-if="popupType === '好友红包'">
        <view class="friend-envelope">
          <view class="envelope-light">
            <v-image
              width="750rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-light.png"
            />
          </view>
          <view class="envelope-background">
            <v-image
              width="750rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-background-2.png"
            />
          </view>
          <view class="envelope-price-text">
            <text class="price">
              {{ discount.amount }}
            </text>
            <text>元</text>
          </view>
          <view class="envelope-button">
            <v-image
              width="526rpx"
              mode="widthFix"
              oss-src="landing-page-red-envelope-button-2.png"
            />
          </view>
        </view>
      </template>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const emits = defineEmits<{
  'to-spec': [];
}>();

const landingStore = $store.landing();
const discount = computed(() => landingStore.discount);
const data = computed(() => landingStore.landingPageData);

const isShowPopper = ref(false);
const isShowContent = ref(false);
const isShowImage = ref(false);
const popupType = computed(() => {
  if (landingStore.refluxCurrent?.noPopup) return undefined;
  switch (landingStore.refluxCurrent?.type) {
    case 'LANDING_PAGE_SUBSIDY':
      return '补贴弹窗';
    case 'LANDING_PAGE_RETRIEVE':
      return '挽留弹窗';
    case 'LANDING_PAGE_SECONDARY_RETRIEVE':
      return '二次挽留弹窗';
    case 'MULTILEVEL_REFLUX_LUCKY_REDPACKET':
      return '手气红包';
    case 'MULTILEVEL_REFLUX_FRIEND_REDPACKET':
      return '好友红包';
    default:
      return undefined;
  }
});
const subsidyImage = computed(() => {
  return data.value?.subsidy_setting.popup_image;
});

const showHandle = async () => {
  await new Promise((resolve) => setTimeout(resolve, 100));
  isShowContent.value = true;
  await new Promise((resolve) => setTimeout(resolve, 100));
  isShowImage.value = true;
};

const closeHandle = () => {
  switch (popupType.value) {
    case '二次挽留弹窗':
    case '补贴弹窗':
    case '手气红包':
    case '好友红包':
      uni.showToast({ title: '优惠券领取成功', icon: 'none' });
      break;
  }
  if (popupType.value !== '补贴弹窗' && popupType.value !== '挽留弹窗') {
    emits('to-spec');
  }
  if (popupType.value === '挽留弹窗' || popupType.value === '二次挽留弹窗') {
    landingStore.refluxIndex += 1;
  }
  landingStore.isShowPopup = false;
};
const retrieveSubmit = () => {
  uni.showToast({ title: '优惠券领取成功', icon: 'none' });
  isShowPopper.value = false;
  emits('to-spec');
};
const retrieveCancel = () => {
  isShowPopper.value = false;
};

const checkPopup = () => {
  if (popupType.value) {
    isShowPopper.value = true;
  } else {
    landingStore.isShowPopup = false;
  }
  if (landingStore.refluxCurrent?.noPopup) {
    // 设备渲染时间不同，延迟触发
    setTimeout(() => emits('to-spec'), 200);
    setTimeout(() => emits('to-spec'), 350);
    setTimeout(() => emits('to-spec'), 500);
  }
};

defineExpose({ checkPopup });
</script>

<style lang="scss" scoped>
.popper-container {
  position: relative;
  width: fit-content;
  height: fit-content;
  opacity: 0;
  transition: opacity 0.15s;
  &.show {
    opacity: 1;
  }
  .price-text {
    position: absolute;
    z-index: 1;
    top: 47.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70rpx;
    white-space: nowrap;
    font-weight: bolder;
    line-height: 105rpx;
    color: #ffeeb5;
  }
  .retrieve {
    width: 720rpx;
    .container {
      padding: 95rpx 80rpx 80rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 24rpx;
      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32rpx;
        .title {
          font-size: 36rpx;
          font-weight: bold;
        }
        .text {
          font-size: 28rpx;
          color: #333;
          text-align: center;
        }
        .highlight {
          color: #ff2f3b;
          font-weight: bold;
        }
      }
      .button-list {
        display: flex;
        gap: 36rpx;
        justify-content: center;
        .cancel-button {
          height: 100rpx;
          width: 252rpx;
          border-radius: 50rpx;
          box-sizing: border-box;
          border: 1px solid #ff2f3b;
          color: #ff2f3b;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
        }
        .submit-button {
          height: 100rpx;
          width: 252rpx;
          border-radius: 50rpx;
          box-sizing: border-box;
          background: linear-gradient(180deg, #ff2f3b 50%, #ff9e93 104%);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
        }
      }
    }
  }
  .secondary-retrieve {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    .top-image {
      transform: translateY(80rpx);
      overflow: hidden;
      align-self: flex-end;
      width: 0;
      transition: width 0.3s;
      display: flex;
      flex-direction: row-reverse;
      .content {
        width: 750rpx;
      }
      &.show {
        width: 750rpx;
      }
    }
    .center-image {
      position: relative;
      overflow: hidden;
      align-self: flex-start;
      height: 350rpx;
      width: 0;
      transition: width 0.3s;
      .content {
        position: relative;
        width: 750rpx;
      }
      &.show {
        width: 750rpx;
      }
      .container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        color: #fff;
        font-weight: bold;
        transform-origin: center center;
        transform: rotate(-3.5deg);
        .sub {
          font-size: 36rpx;
        }
        .main {
          font-size: 48rpx;
          display: flex;
          gap: 12rpx;
          .hightlight {
            color: #feec88;
          }
        }
      }
    }
    .bottom-image {
      transform: translateY(-80rpx);
      overflow: hidden;
      align-self: flex-start;
      width: 0;
      transition: width 0.3s;
      .content {
        width: 750rpx;
      }
      &.show {
        width: 750rpx;
      }
    }
  }
  .lucky-envelope {
    .envelope-background {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .envelope-price-text {
      position: absolute;
      top: 37%;
      left: 0;
      right: 0;
      display: flex;
      align-items: baseline;
      justify-content: center;
      z-index: 2;
      font-size: 40rpx;
      color: #fff;
      .price {
        font-size: 130rpx;
        font-weight: bold;
      }
    }
    .envelope-button {
      position: absolute;
      z-index: 3;
      bottom: 28%;
      left: calc(50% - 408rpx / 2);
      animation: jumping 1s infinite;
    }
  }
  .friend-envelope {
    .envelope-background {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .envelope-price-text {
      position: absolute;
      top: 55%;
      left: 14%;
      width: 28%;
      display: flex;
      align-items: baseline;
      justify-content: center;
      z-index: 2;
      font-size: 30rpx;
      color: #fff;
      .price {
        font-size: 65rpx;
        font-weight: bold;
      }
    }
    .envelope-button {
      position: absolute;
      z-index: 3;
      bottom: 18%;
      left: calc(50% - 526rpx / 2);
      animation: jumping 1s infinite;
    }
  }
}

@keyframes jumping {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
</style>
